import { ImageResponse } from 'next/og';
import { Fallback, Wallpaper } from '@/components/brand/og';
import { intel, safe } from '@/lib/api';
import { fmtInt, fmtUsdPerM } from '@/lib/format';
import { SITE_NAME } from '@/lib/site';

export const runtime = 'nodejs';
export const alt = `Provider on ${SITE_NAME}`;
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function ProviderOgImage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const res = await safe(intel.providers());
  const p = res?.items.find((x) => x.slug === slug);
  if (!p) return new ImageResponse(<Fallback label="Provider" />, { ...size });
  const counters: [string, string][] = [
    ['Models served', fmtInt(p.model_count)],
    ['Organizations', fmtInt(p.organizations_covered)],
    ['Median input / 1M', fmtUsdPerM(p.input_price_distribution?.median)],
    ['Median output / 1M', fmtUsdPerM(p.output_price_distribution?.median)],
  ];
  return new ImageResponse(<Wallpaper eyebrow={p.organization ? `Provider · ${p.organization.name}` : 'Provider'} title={p.name} subtitle="Models served, published prices per 1M tokens, distributions, listings and price history — every row with its source." counters={counters} footer={`www.ai-atlas.co/providers/${slug}`} markPx={220} />, { ...size });
}